<template>
    <ul id="toplist">
        <li v-for="item in sortToplist">
            <router-link :to="{name: 'board', params: {'topid': item.id, 'topname': item.name}}">
                <img :src="'/src/assets/img/toplist_' + item.id + '.jpg'" alt="">
                <div>
                    <h3 class="topic_tit">{{item.name}}</h3>
                    <p v-for="(value, key) in item.list">{{key + 1}}<span class="text_name">{{value.songname}}</span>- {{value.singername}}</p>
                </div>
                <i class="topic_arrow"></i>
            </router-link>
        </li>
    </ul>
</template>

<script>
    // 榜单数组
    import tops from '../../config/tops.js';
    import { Indicator } from 'mint-ui';

    export default {
        name: 'toplist',
        data() {
            return {
                toplist: []
            }
        },
        computed: {
            sortToplist: function() {

                function compare(property) {
                    return function(a, b) {
                        var value1 = a[property];
                        var value2 = b[property];
                        return value1 - value2;
                    }
                }
                return this.toplist.sort(compare('index'));
            
            }
        },
        mounted() {
            if (localStorage.getItem('toplist')) {
                this.toplist = JSON.parse(localStorage.getItem('toplist'));
                return;
            }
            var that = this;

            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            });

            for (let i = 0; i < tops.length; i++) {
                // 请求排行榜数据
                this.$http.get('http://route.showapi.com/213-4', {
                    params: {
                        showapi_appid: 26444,
                        showapi_sign: 'e6ed68d43d734b78892a649fedd90cbe',
                        topid: tops[i].id
                    }
                })
                .then(function(res) {
                    var data = res.data;
                    if (data && data.showapi_res_code == 0) {
                        var obj = {
                            index: tops[i].index,
                            id: tops[i].id,
                            name: '巅峰榜·' + tops[i].name,
                            list: data.showapi_res_body.pagebean.songlist.slice(0, 3)
                        };
                        that.toplist.push(obj);
                    }

                    if (i == tops.length - 1) {

                        localStorage.setItem('toplist', JSON.stringify(that.toplist));
                        Indicator.close();
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    #toplist {
        margin: 10px;

        li {
            margin-bottom: 10px;
            overflow: hidden;

            a {
                display: flex;
                position: relative;
                background-color: #fff;

                img {
                    display: block;
                    width: 100px;
                    height: 100px;
                }

                div {
                    flex: 1;
                    margin: 0 10px 0 15px;
                    line-height: 1.4;
                    overflow: hidden;

                    .topic_tit {
                        font-size: 16px;
                        color: #000;
                        font-weight: normal;
                        margin-top: 5px;
                        margin-bottom: 5px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    p {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.5);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                        .text_name {
                            color: #000;
                            margin-left: 8px;
                            margin-right: 5px;
                        }
                    }
                    
                    
                }

                .topic_arrow {
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    margin-top: -4px;
                    width: 6px;
                    height: 6px;
                    border-right: 1px solid #b2b2b2;
                    border-bottom: 1px solid #b2b2b2;
                    transform: rotate(-45deg);
                }
            }
        }
    }

    .mint-indicator-mask {
        opacity: 1;
        background-color: rgba(0, 0, 0, .5);
    }
    .mint-indicator-wrapper {
        z-index: 999;
    }
</style>